<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 打卡规则 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form :inline="true" :model="query" class="demo-form-inline">
                <el-form-item label="打卡点" style="flex: 1 1 50%" prop="value1">
                    <el-select
                        v-model="query.value1"
                        multiple
                        filterable
                        allow-create
                        default-first-option
                        placeholder="请选择或者输入打卡点"
                    >
                        <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                    <el-button @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
            <el-table
                :data="tableData"
                border
                class="table"
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange"
            >
                <el-table-column prop="id" label="序号" width="55" align="center"></el-table-column>
                <el-table-column prop="updateBy" label="姓名"></el-table-column>
                <el-table-column prop="name" label="打卡点"></el-table-column>
                <el-table-column label="打卡范围" align="center">
                    <template slot-scope="scope">
                        <el-select
                            v-model="scope.row.value1"
                            multiple
                            filterable
                            allow-create
                            default-first-option
                            placeholder="请选择或者输入打卡范围"
                        >
                            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import { inspectionShiftSetting } from '../api/index';
export default {
    name: 'basetable',
    data() {
        return {
            query: {
                value1: []
            },
            tableData: [],
            options1: [
                { value: '1', label: '100米以内' },
                { value: '2', label: '150米以内' },
                { value: '3', label: '200米以内' },
                { value: '4', label: '250米以内' },
                { value: '5', label: '300米以内' }
            ]
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            inspectionShiftSetting(this.query).then((res) => {
                console.log(res,'打卡规则结果');
                this.tableData = res.result.map((item) => ({
                    ...item,
                    value1: item.value1 || []
                }));
                this.pageTotal = res.pageTotal || 50;
            });
        },
        handleSearch() {
            this.$set(this.query, 'pageIndex', 1);
            this.getData();
        },
        handleReset() {
            this.query.value1 = [];
        },
        handleSelectionChange(){}
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-end;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
</style>
